<template>
  <div id="app">
    <form action="" @submit.prevent="onsubmit">
      <div>
        姓名：<input type="text" placeholder="学员姓名" v-model="name" />
      </div>
      <div>
        年龄：<input type="text" placeholder="学员年龄" v-model="age" />
      </div>
      <div>
        组号：<select v-model="group">
          <option value="">请选择一个组号</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div>
        性别：
        <input
          type="radio"
          v-model="gender"
          name="gender"
          value="男"
          checked
        />男 <input type="radio" v-model="gender" name="gender" value="女" />女
      </div>
      <div>
        手机：<input type="text" v-model="phone" placeholder="手机号" />
      </div>
      <div>
        薪资：<input type="text" placeholder="期望薪资" v-model="salary" />
        <input type="text" placeholder="实际薪资" v-model="truesalary" />
      </div>
      <div>
        籍贯：<select v-model="province">
          <option value="">-省-</option>
          <option value="广东省">广东省</option>
          <option value="广西省">广西省</option>
          <option value="湖南省">湖南省</option>
        </select>
        <select v-model="city">
          <option value="">-市-</option>
          <option value="未知市">未知市</option>
          <option value="未知市">未知市</option>
          <option value="未知市">未知市</option>
        </select>
        <select v-model="area">
          <option value="">-区-</option>
          <option value="未知区">未知区</option>
          <option value="未知区">未知区</option>
          <option value="未知区">未知区</option>
        </select>
      </div>
      <button>确认添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
      group: "",
      gender: "",
      phone: "",
      salary: "",
      truesalary: "",
      province: "",
      city: "",
      area: "",
    };
  },
  methods: {
    onsubmit() {
      console.log(this.name);
      console.log(this.age);
      console.log(this.group);
      console.log(this.gender);
      console.log(this.phone);
      console.log(this.salary);
      console.log(this.truesalary);
      console.log(this.province);
      console.log(this.city);
      console.log(this.area);
    },
  },
};
</script>

<style lang="less">
div {
  h1 {
    background-color: #11ffaa;
  }
}
</style>
